<template>
    <el-dialog title="播放报警视频" v-model="mp4Show" :close-on-click-modal="false" width="600px">
        <video id="myVideo" :src="nowMp4Url" controls width="100%" height="300px" ref="myVideoRef" v-if="videoShow"
            :class="$style['video-wrapper']">
        </video>
        <div style="width:100%;">
            <div v-for="(item, index) in mp4List" :key="index"
                :class="[$style['mp4_item'], nowMp4Url == item ? $style['mp4_active'] : '']" @click="changeMp4(item)">
                {{ item }}
            </div>
        </div>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="mp4Show = false">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const emits = defineEmits(['success'])
const mp4Show = ref(false)
const nowMp4Url = ref('')
const mp4List = ref([])
const videoShow = ref(false)
const myVideoRef = ref(null)
const changeMp4 = (item) => {
    videoShow.value = false
    nowMp4Url.value = item
    videoShow.value = true
    nextTick(() => {
        const video = myVideoRef.value
        video.load()           // 加载新的视频
        video.play()          // 播放新的视频
    })

}
const open = (row) => {
    videoShow.value = false
    mp4List.value = row.videos
    nowMp4Url.value = row.videos[0]
    mp4Show.value = true
    videoShow.value = true
}
defineExpose({
    open
})
</script>
<style lang="scss" module>
.video-wrapper {
    height: 300px
}

.mp4_item {
    width: 100%;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
}

.mp4_active {
    background: #ccc;
}
</style>